<template>
    <button @click="url = url+'1'">点我</button>
    {{url}}
</template>

<script setup>
import { ref, reactive, watch, watchEffect } from 'vue'
const url = ref('https://...')
// 我们可以用 watchEffect 函数 来简化上面的代码。watchEffect() 会立即执行一遍回调函数，
// 如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源。上面的例子可以重写为：

// 小结:
// 1.用watchEffect，并没有写侦听源，它侦听了方法里面的url.value
// watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
// 2.watch 只追踪明确侦听的数据源。
watchEffect(async () => {
    debugger
    // const response = await fetch(url.value)
    console.log(url.value);
    // data.value = await response.json()
})
// 这个例子中，回调会立即执行。在执行期间，它会自动追踪 url.value 作为依赖（和计算属性的行为类似）。每当 url.value 变化时，回调会再次执行。
</script>


